import React from 'react'

import styles from './QuestionRadio.module.scss'

interface PropsType {
  fe_id: string
  props: {
    title: string
    options: Array<{
      value: string
      text: string
    }>
    value: string
    isVertical: boolean
  }
}

const QuestionRadio: React.FC<PropsType> = ({ fe_id, props }) => {
  const { title, options, value, isVertical } = props
  return (
    <>
      <p>{title}</p>
      <ul className={styles.list}>
        {options.map(({ value: val, text }) => {
          return (
            <li
              key={val}
              className={isVertical ? styles['vertical-item'] : styles['horizontal-item']}
            >
              <label>
                <input type="radio" name={fe_id} value={val} defaultChecked={val === value} />
                {text}
              </label>
            </li>
          )
        })}
      </ul>
    </>
  )
}

export default QuestionRadio
